<template>
  <div class="app-container">
    <!-- Header头部区域 -->
    <Header title="购物车"></Header>

    <!-- 渲染商品 -->
    <Goods
     v-for="item in list" 
     :key="item.id" 
     :id="item.id"
     :title="item.goods_name" 
     :price="item.goods_price" 
     :pic="item.goods_img" 
     :state="item.goods_state"
     :count="item.goods_count"
     @state-change="getNewState"
     ></Goods>

     <!-- Footer 区域-->
     <Footer
     :isfull="fullState"
     :amount="amt"
     :all="total"
     @full-change="getNewFull"
     ></Footer>
  </div>
</template>

<script>
//导入 axios 请求库
import axios from 'axios';
//导入需要的组件
import Header from '@/components/Header/Header.vue';
import Goods from '@/components/Goods/Goods.vue';
import Footer from '@/components/Footer/Footer.vue';
import bus from '@/components/eventBus.js';

export default {
  data(){
    return {
      //用来存放 axios 请求回来的数据
      list:[]
    }
  },
  computed:{
    //动态计算出全选的状态
    fullState(){
      return this.list.every(item=>item.goods_state);
    },
    //计算勾选商品的总价
    amt(){
      return this.list.filter(item=>item.goods_state).reduce((total,item)=>(total+=item.goods_price*item.goods_count),0);
    },
    //计算勾选商品总数
    total(){
      return this.list.filter(item=>item.goods_state).reduce((total,item)=>(total+=item.goods_count),0);
    }
  },
  methods:{
    //封装请求数据的方法
   async initCartlist(){
     const {data:res}=await axios.get('https://www.escook.cn/api/cart');
      //请求回需要渲染到页面的数据 需要转存到 data 里面
      if(res.status==200){
        this.list=res.list;
      }
    },
    //接受子组件传递过来的数据
    getNewState(e){
      this.list.some(item=>{
        if(item.id==e.id){
          item.goods_state=e.value;
          return true;
        }
      })
    },
    getNewFull(e){
      this.list.forEach(item=>{
       item.goods_state=e;
      })
    }
 },

 created(){
   //调用请求数据的方法
   this.initCartlist();
  
    bus.$on('share',(val)=>{
     this.list.some(item=>{
       if(item.id==val.id){
         item.goods_count=val.value;
         return true;
       }
     })
    })
 },

  components: {
    Header,
    Goods,
    Footer
}
}
</script>

<style lang="less" scoped>
.app-container{
  padding-top: 45px;
  padding-bottom: 50px;
}
</style>